<template>
  <div class="wrapper" ref="waiboxA">
    <div class="centent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 引入better-scroll 滚动框架
import BSroll from "better-scroll"
export default {
    name:'Scroll',
    data() {
      return{
        scroll: null
      }
    },
    props: {
      /* 
        监听滚动位子并派发Scroll事件
        0 为默认值, 不派发Scroll事件
        1 为非实时监听滚动位子,屏幕滑动超过一定时间后派发Scroll事件
        2 实时监听滚动位子, 并派发Scroll事件
        3 不仅实时监听滚动位置, 而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
      */  
       probeType:{
          type: Number,
           default: 0
       },
      // 这个配置用于做上拉加载功能，默认为 false。当值为true时会开启上拉加载功能
       pullUpLoad:{
         type: Boolean,
         default : false
       }
    },
    mounted() {
      // 创建BScroll对象
      this.scroll = new BSroll(this.$refs.waiboxA, {
         click: true,
         probeType: this.probeType,
         pullUpLoad: this.pullUpLoad
      })
      // 查看滚动区域的实际高度
       console.log(this.scroll);
      //  监听滚动位置
      if(this.probeType === 2 || this.probeType === 3) {
      this.scroll.on('scroll', weizi => {
      //  console.log(weizi);  // 查看滚动位置
          this.$emit('scroll',weizi)  // 向外暴露自定义 scroll 事件, 便于父组件获取本组件参数
      })
      }
      // 监听上拉事件(滚动到底部)
      if(this.pullUpLoad){
      this.scroll.on('pullingUp', () => {
      //  console.log('已经到底部');
       this.$emit('pullingUp')
      })
      }
    },
    methods: {
      // 封装回到顶部数据, 并设置BackTop button y轴高度和默认返回时间
        scrollTo(x, y, time= 400) {   
             this.scroll && this.scroll.scrollTo(x, y, time)
        },
        finishPullUp() {
            this.scroll.finishPullUp()
        },
        // 封装 scroll.refresh()方法
        refresh(){
          console.log('OK');
          this.scroll && this.scroll.refresh()
        },
        ScrollY(){
           return this.scroll? this.scroll.y: 0
        }
    }
}
</script>

<style>
</style>